/*for train-pagination*/
@keyframes lineA {
    0%, 100% {
        clip-path: inset(0 0 calc(100% - 4px) 0)
    }
    25% {
        clip-path: inset(0 calc(100% - 4px) 0 0)
    }
    50% {
        clip-path: inset(calc(100% - 4px) 0 0 0)
    }
    75% {
        clip-path: inset(0 0 0 calc(100% - 4px))
    }
}

@keyframes lineB {
    0%, 100% {
        clip-path: inset(calc(100% - 4px) 0 0 0)
    }
    25% {
        clip-path: inset(0 0 0 calc(100% - 4px))
    }
    50% {
        clip-path: inset(0 0 calc(100% - 4px) 0)
    }
    75% {
        clip-path: inset(0 calc(100% - 4px) 0 0)
    }
}

.pagination-wrap {
    position: relative;
}

.vine-border {
    z-index: 3;
    position: absolute;
    left: -2px;
    top: 0;
    width: 640px;
    height: 360px;
    padding-top: 20px;
    margin: 0px auto;
    background-image: url(/img/vine-top.png), url(/img/vine-bottom.png);
    background-position: top 20px left 0, bottom 0px left 0;
    background-size: 644px 240px;
}

.vine-border,
.vine-border:after,
.vine-border:before {
    background-repeat: no-repeat;
    background-clip: content-box;
}

.vine-border:before,
.vine-border:after {
    z-index: 4;
    position: absolute;
    content: '';
}

.vine-border:before { /*这是.vine-border上边的叶子遮挡*/
    background-position: top -36px right 75px;
    background-size: 672px 240px;
    width: 290px;
    top: 56px;
    right: -83px;
    background-image: url(/img/vine-top.png);
    height: 80px;
}

.vine-border:after {
    /*background: rgba(200, 100, 100, .6);*/
    /*margin-top: 20px;*/
    background-position: top 14px right 75px;
    background-size: 653px 240px;
    width: 600px;
    bottom: 50px;
    right: -83px;
    background-image: url(/img/vine-bottom.png);
    height: 42px;
    /*height: 442px;*/
}

.flow-border {
    z-index: 3;
}

.flow-border::after,
.flow-border::before {
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    content: '';
    padding: 0 46.5px;
    margin-left: -24px;
    margin-right: -29px;
    margin-top: -42px;
    margin-bottom: -120px;
    border-style: double;
    border-color: rgb(207, 230, 149);
    border-width: 14px 12px;
    -webkit-border-image: url(/img/green-zebra.png) 20 20 stretch;
}

.flow-border::before {
    -webkit-animation: lineA 22s linear infinite;
    -o-animation: lineA 22s linear infinite;
    animation: lineA 22s linear infinite;
}

.flow-border::after {
    -webkit-animation: lineB 22s linear infinite;
    -o-animation: lineB 22s linear infinite;
    animation: lineB 22s linear infinite;
}

.pagination {
    position: absolute;
    top: 60px;
    width: 596px;
    height: 204px;
    text-align: center;
    margin-left: 25px;
}

.train {
    margin: 10px auto;
    padding-bottom: 3px;
    width: 500px;
    position: relative;
    font-size: 0;
    height: 65px;
}

@keyframes move-railway {
    0% {
        background-position: left 100% top -26px
    }
    /*50%{background-position: left 50% top -26px}*/
    100% {
        background-position: left 0% top -26px
    }
}

.train:after { /*这是画铁路*/
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 10px;
    background-image: url(/img/train-pagination-sprite.png);
    background-size: 129px 106px;
    background-position: 0px -26px;
    background-repeat: repeat-x;
    animation: move-railway linear 12s infinite;
}

.pagination-control-bar {
    margin-top: 14px;
}

.pagination ul {
    text-align: center;
}

ul, li {
    display: inline-block;
}

.train li.train-head,
.train li {
    position: relative;
    font-size: 12px;
    display: inline-block;
}

.train li {
    padding-top: 20px;
    padding-left: 10px;
    width: 84px;
    height: 12px;
    background-color: rgba(100, 200, 100, .2);
    background-image: url(/img/train-pagination-bg.jpg);
    background-size: 340px 55px;
    background-position: left -24px top -8px;
    background-repeat: no-repeat;
    line-height: 0px;
}

.train li:last-of-type {
    width: 78px;
}

.train li:last-of-type:before {
    -moz-border-radius-topright: 30px;
    width: 88px;
    height: 14px;
    /*bottom: 1px;*/
}

.train li:after,
.train li:before { /*这是车箱底盘以下和轮子下半截*/
    content: '';
    position: absolute;
    left: 0;
    bottom: -12px;
    height: 13px;
}

/*是车箱底盘以下和轮子下半截*/
.train li:before {
    z-index: 2;
    left: -2px;
    right: 0;
    background-color: #3F7C15;
    width: 89px;
    border-radius: 3px;
}

/*.train li:last-of-type:after,*/
.train li:after {
    content: '';
    position: absolute;
    left: -.5px;
    width: 100px;
    height: 13px;
    background-image: url(/img/train-pagination-bg.jpg);
    background-size: 360px 112px;
    background-position: left -.128rem bottom -18px;
    background-repeat: no-repeat;
    -webkit-filter: hue-rotate(100deg) saturate(50%) grayscale(50%);
    -moz-filter: saturate(100%) grayscale(5%);
    -ms-filter: saturate(100%) grayscale(5%);
    filter: hue-rotate(100deg) saturate(50%) grayscale(50%);
}

.train li.train-head,
.train li.train-head .head-mask {
    width: 90px;
    background-color: rgba(100, 200, 100, .2);
    background-image: url(/img/train-pagination-bg.jpg);
    background-repeat: no-repeat;
}

.train li.train-head:before {
    bottom: 0;
    left: -3px;
    width: 91px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.train li.train-head {
    background-size: 360px 124px;
    height: 58px;
    /*top: -13px;*/
    bottom: 33px;
    right: 0px;
    background-position: right -40px bottom -20px;
}

.train li.train-head:after {
    bottom: -2px;
    left: 0px;
    width: 102px;
    background-position: left -223px bottom -8px;
}

.train li {
    -webkit-filter: saturate(62%) grayscale(5%);;
    -moz-filter: saturate(62%) grayscale(5%);
    -ms-filter: saturate(62%) grayscale(5%);
    filter: saturate(65%) grayscale(5%);
}

.train li.page-wrap {
    position: relative;
    top: -10px;
    padding-top: 14px;
    padding-left: 0;
    padding-bottom: 6px;
    padding-right: 10px;
}

.train a {
    position: relative;
    display: inline-block;
    /*display: block;*/
    height: 18px;
    width: 57px;
    text-align: center;
    color: #2a4;
}

.train-head a.head-mask {
    z-index: 1;
    position: absolute;
    right: 12px;
    bottom: -2px !important;
    background-color: #fff;
    width: 82px !important;
    height: 10px;
}

.train-head a.head-mask:before {
    position: relative;
    display: inline-block;
    right: -36px;
    content: '';
    width: 18px;
    height: 4px;
    background-color: #9da4a6;
    border-top: 0;
    border-top-width: 0px;
    border-top-style: initial;
    border-top-color: initial;
    bottom: -4px;
}

.train-head a.head-mask:after {
    bottom: -1px;
    right: -4px;
    content: '';
    position: absolute;
    /*right: -30px;*/
    width: 74px;
    height: 5px;
    background-color: #9a989b;
}

.train a span {
    width: 60px;
    height: 20px;
    display: inline-block;
    position: absolute;
    left: -9px;
}

.train a:hover {
    color: #2f3;
}

@keyframes scroll {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.wheels:before,
.wheels:after {
    z-index: 4;
    content: '';
    bottom: -23px;
    position: absolute;
    display: inline-block;
    width: 25px;
    height: 25px;
    background-image: url(/img/train-pagination-sprite.png);
    background-position: 0px 0px;
    background-repeat: no-repeat;
    animation: scroll 4s linear infinite;
}

.wheels:before {
    left: -20px;
}

.train li.train-head .wheels:after,
.train li.train-head .wheels:before {
    bottom: -53px;
}

.train li.train-head .wheels:before {
    left: -7px;
}

.train .train-head a {
    /*left: -8.5px;*/
    bottom: -3px;
}

.train li a.text {
    position: absolute;
    background-size: 300px 66px;
    left: 23px;
    font-size: 12px;
    display: inline-block;
    height: 22px;
    line-height: 25px;
    width: 56px;
    background-color: #fff;
    bottom: 14px;
}

.train li a.text:before,
.train li a.text:after {
    content: '';
    width: 100%;
    position: absolute;
    display: block;
    background-color: #64b567;
    left: 0;
}

.train li a.text:before {
    height: 1px;
    top: 0;
}

.train li a.text:after {
    height: 1px;
    bottom: 0;
}

.train .train-head a span {
    width: 52px;
    height: 20px;
    line-height: 9px;
}

.pagination.pagination-list:before {
    content: '';
    z-index: 1;
    position: absolute;
    background-color: #fff;
    width: 14px;
    height: 16px;
    right: -1px;
    bottom: 23px;
}

.page-wrap a input.page-input {
    outline: 0px;
    border: 0;
    margin: 0;
    margin-left: 4px;
    font-size: 12px;
    width: 61px;
    height: 11px;
    text-align: center;
    color: #2f3;
}

.page-wrap a.wheels {
    left: -4px;
}

.page-wrap a.wheels:before,
.page-wrap a.wheels:after {
    bottom: -29px;
}

.page-wrap a.wheels:before {
    left: 0;
}

.page-wrap a.wheels:after {
    left: 43px;
}


.vine-border .pagination-control-bar {
    padding-top: 40px !important;
}
